<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div th:replace="fragments/header :: header"></div>
    <!-- 登录页面主体 -->
    <div class="login-container">
        <div class="login-content">
            <div class="login-header">
                <h2>用户登录</h2>
                <p>还没有账号？<a href="./register.html">立即注册</a></p>
            </div>
            <div class="login-form">
                <!-- 用户名/邮箱输入 -->
                <div class="form-group">
                    <label for="username">用户名/邮箱</label>
                    <div class="input-wrapper">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username" name="username" required
                               placeholder="请输入用户名或邮箱">
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="form-group">
                    <label for="password">密码</label>
                    <div class="input-wrapper">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password" name="password" required
                               placeholder="请输入密码">
                    </div>
                </div>

                <!-- 记住我和忘记密码 -->
                <div class="form-group login-options">
                    <label class="remember-me">
                        <input type="checkbox" name="remember" id="remember">
                        <span>记住我</span>
                    </label>
                    <a href="/forgot-password" class="forgot-password">忘记密码？</a>
                </div>

                <!-- 登录按钮 -->
                <button type="submit" id="loginBtn" class="login-btn">登录</button>

                <!-- 第三方登录 -->
                <div class="third-party-login">
                    <p>其他登录方式</p>
                    <div class="login-methods">
                        <a href="#" class="wechat"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="qq"><i class="fab fa-qq"></i></a>
                        <a href="#" class="weibo"><i class="fab fa-weibo"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div th:replace="fragments/footer :: footer"></div>
    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/auth.js"></script>
    <script>

        document.querySelector('#loginBtn').addEventListener('click', function () {
            // 获取用户名和密码
            let username = document.querySelector('#username').value;
            let password = document.querySelector('#password').value;

            // 发送登录请求
            AuthService.login(username,password).then(res=>{
                if(res.username){
                    window.location.href = './home.html'
                }else{
                    layer.msg('登录失败')
                }
            })
        })
    </script>
</body>
</html>